import s from './index.module.css';

interface PropsType {
  data: any; // 排期数据
  copyFn: any;
  detailData: any; // 详情
  height: number;
  copyDetailFn: any;
}

export default function SchedulePlanLeft({ data = [], copyFn, detailData, height, copyDetailFn }: PropsType) {
  // renderMainChildren
  const renderMainChildren = (it) => {
    const { title, key, value, time } = it;
    return (
      <div key={key} className={s.planLeftMainItem}>
        <div className={`${s.planLeftMainItemTitle} ${s.planLeftMainItemTime}`}>{title}</div>
        <div className={s.planLeftMainItemTime}>
          <span style={{ marginRight: '30px' }}>{time}</span>
          <span>{value}</span>
        </div>
      </div>
    );
  };

  // renderMain
  const renderMain = (it) => {
    const { title, key, value, children } = it;
    return (
      <div key={key}>
        <div className={key === 'testRange' ? s.planLeftMainItemTestRange : s.planLeftMainItem}>
          <div className={s.planLeftMainItemTitle}>{title}：</div>
          <div>{value}</div>
        </div>
        {children && children.map(renderMainChildren)}
      </div>
    );
  };
  return (
    <div className={s.planContentLeft}>
      <div className={s.planLeftHeader}>
        <div className={s.planLeftHeaderTitle}>{detailData?.name || '-'}</div>
        <div className={s.planLeftHeaderUrl}>{`https://www.tapd.cn/41194427/prong/stories/view/${String(detailData?.id)}`}</div>
      </div>
      <div className={s.planLeftMain} style={{ height }}>
        {data.map(renderMain)}
      </div>
      <div className={s.planLeftFooter}>
        <span className={s.planLeftFooterBtn} onClick={() => copyFn(data)}>
          详细排期
        </span>
        <span className={s.planLeftFooterBtn} onClick={() => copyDetailFn(data)}>
          复制排期
        </span>
      </div>
    </div>
  );
}
